import React, { useState, useRef, useContext } from 'react'
import {
  Space, Table, Button, Form,
  Input, Radio,
  Select,
} from 'antd';
import MyContext from '@/store/MyContext';
import { actionDel, actionSearch, actionReset } from '../store/activityReducer'

export default function Activity() {
  const context = useContext(MyContext);
  console.log(context)
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (sex) => sex == '1' ? '男' : '女'
    },
    {
      title: '年级',
      dataIndex: 'grade',
      key: 'grade',
    },
    {
      title: '操作',
      key: 'action',
      render: (record) => (
        <Space size="middle">
          <Button type="link" size='small'>
            编辑
          </Button>
          <Button type="link" size='small' className='btn-del' onClick={() => onDelActivity(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  function onDelActivity(record) {
    console.log(record.key)
    context.acivityDispatch(actionDel(record.key));
  }

  const formRef = useRef();

  const onFormLayoutChange = () => { }
  const onSearch = (values) => {
    console.log('搜索:', values);
    context.acivityDispatch(actionSearch(values))
  }
  const onReset = () => {
    // 需要获取表单实例后，调用 resetFields 方法就可以了
    formRef.current.resetFields();
    context.acivityDispatch(actionReset())
  };

  return (
    <div className='activity'>
      <h3>活动管理</h3>

      <Form
        ref={formRef}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        initialValues={{}}
        onValuesChange={onFormLayoutChange}
        onFinish={onSearch}
      >
        <Form.Item label="性别" name="sex">
          <Radio.Group>
            <Radio value="1">男</Radio>
            <Radio value="2">女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="姓名" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="年级" name="grade">
          <Select>
            <Select.Option value="1">1</Select.Option>
            <Select.Option value="2">2</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Space size="middle">
            <Button htmlType="submit" >搜索</Button>
            <Button onClick={onReset}>重置</Button>
          </Space>

        </Form.Item>
      </Form>

      <Table className='acivity-table' columns={columns} dataSource={context.activity} />;
    </div>
  )
}
